import React, { useState } from 'react';
import { setLocale, useIntl, FormattedMessage } from 'umi';
import { ArrowDownOutlined, ArrowUpOutlined } from '@ant-design/icons';
import ProCard from '@ant-design/pro-card';
import RcResizeObserver from 'rc-resize-observer';
import { Statistic } from 'antd';
import moment from 'moment';

import style from './index.less';

export default function Welcome() {
  const intl = useIntl(); // 国际化
  const t = (id: any) => intl.formatMessage({ id }); // 写成传参方式

  const [responsive, setResponsive] = useState(false);

  const data = moment().format('YYYY-MM-DD ');
  const titleDom = () => {
    return (
      <span style={{ fontSize: '16px' }}>
        {t('homepage.data')}：{data}
      </span>
    );
  };

  // console.log(data);

  return (
    <div className={style.homepageboss}>
      <RcResizeObserver
        key="resize-observer"
        onResize={(offset) => {
          setResponsive(offset.width < 596);
        }}
      >
        <ProCard
          style={{ height: '100%' }}
          // title="数据概括"
          title={t('homepage.Datasummary')}
          extra={titleDom()}
          bordered
          headerBordered
          split={responsive ? 'horizontal' : 'vertical'}
        >
          <ProCard split="horizontal">
            <ProCard split="horizontal">
              <ProCard split={responsive ? 'horizontal' : 'vertical'}>
                <ProCard title={t('homepage.NumberOfSubAccounts')}>
                  <Statistic
                    value={79.0}
                    precision={2}
                    valueStyle={{
                      color: '#cf1322',
                    }}
                    prefix={<ArrowDownOutlined />}
                  />
                </ProCard>
                <ProCard
                  title={t('homepage.TotalTransactions')}
                  // title={'总交易笔数'}
                >
                  <Statistic
                    valueStyle={{
                      color: '#3f8600',
                    }}
                    prefix={<ArrowUpOutlined />}
                    value={112893.0}
                    precision={2}
                  />
                </ProCard>
                <ProCard
                  title={t('homepage.AccumulatedAmount')}
                  // title={'累计金额'}
                >
                  <Statistic
                    valueStyle={{
                      color: '#3f8600',
                    }}
                    prefix={<ArrowUpOutlined />}
                    value={112893.0}
                    precision={2}
                  />
                </ProCard>
              </ProCard>
              {/* <ProCard split="vertical">
                <ProCard title="运行中试验">12/56</ProCard>
                <ProCard title="历史试验总数">134 个</ProCard>
              </ProCard> */}
            </ProCard>
            <ProCard
              title={t('homepage.FlowTrend')}
              // title={'流量趋势'}
            >
              {/* <div>图表</div>
              <div>图表</div>
              <div>图表</div>
              <div>图表</div>
              <div>图表</div> */}
            </ProCard>
          </ProCard>
          <ProCard
            title={t('homepage.TrafficOccupancy')}
            // title={'流量占用情况'}
          >
            右侧内容
          </ProCard>
        </ProCard>
      </RcResizeObserver>
    </div>
  );
}
